<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta author="孟庆丰">
    <title>登录 - 医疗管家</title>
    <link rel="stylesheet" type="text/css" href="/login/loginstyle/style/register-login.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/main/plugins/elementui/index.css">
    <link rel="stylesheet" href="/main/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/main/css/style.css">
    <!-- 引入组件库 -->
    <script src="/main/js/vue.js"></script>
    <script src="/main/plugins/elementui/index.js"></script>
    <script type="text/javascript" src="/main/js/jquery.min.js"></script>
    <script src="/main/js/axios-0.18.0.js"></script>
</head>
<body>
<div id="box"></div>
<div class="cent-box" id="el">
    <div class="cent-box-header">
        <img src='loginstyle/images/logo1.png'>
    </div>

    <div class="cont-main clearfix">
        <div class="index-tab">
            <div class="index-slide-nav">
            </div>
        </div>
        <!--使用spring 进行表单登录：
           （1）约定用户名称和密码： username password
           （2）使用form表单登录， 请求方式必须是post
          -->
        <form action="/login" method="post">
            <div class="login form">
                <div class="group">
                    <div class="group-ipt email">
                        <input type="text" v-model="formData.username"
                               name="username" id="username" class="ipt" placeholder="输入您的用户名" required>
                    </div>
                    <div class="group-ipt password">
                        <input type="password" v-model="formData.password"
                               name="password" id="password" class="ipt" placeholder="输入您的登录密码" required>
                    </div>

                </div>
            </div>

            <div class="button">
                <input type="button" class="login-btn register-btn" @click="logSub()"
                       id="button" value="登陆"/>
            </div>
        </form>
    </div>
</div>

<div class="footer">
    <p>Find 医疗管家</p>
    <p>offcn& <a href="http://www.ujiuye.com">www.ujiuye.com</a>--2021</p>
</div>
<script src='/login/loginstyle/js/particles.js' type="text/javascript"></script>
<script src='/login/loginstyle/js/background.js' type="text/javascript"></script>
<script src='/login/loginstyle/js/jquery.min.js' type="text/javascript"></script>
<script src='/login/loginstyle/js/layer/layer.js' type="text/javascript"></script>
</body>
<script>
    var vu = new Vue({
        el: "#el",
        data: {
            formData: {
                username: "",
                password: ""
            }
        },
        methods: {
            logSub() {
                if (this.formData.username != "" && this.formData.password != "") {
                    let username = this.formData.username;
                    let password = this.formData.password;
                    //发送异步请求
                    axios.post("/login", `username=${username}&password=${password}`).then(res => {
                        if (res.data.flag) {
                            //登陆成功
                            this.$message.success(res.data.message);
                            window.setTimeout(function () {
                                window.location.href = "/main/pages/main.html";
                            }, 2000)
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                } else {
                    this.$message.error("请先完善表单信息")
                }
            }
        }
    })
</script>
</html>